<template>
  <div class="self-portrait">
    <template v-if="quarterOptions.length">
      <div class="head-select">
        <div class="select-left" v-if="orgOptions.length > 0">
          <div class="select-li" v-if="orgOptions.length > 1">
            <el-select v-model="orgData" placeholder="请选择" size="mini" value-key="name" @change="selectGrain('org')">
              <el-option v-for="item in orgOptions" :key="item.id" :label="item.name" :value="item"></el-option>
            </el-select>
          </div>
          <div class="select-li" v-if="userOptions.length > 0">
            <el-select
              v-model="userData"
              placeholder="请选择"
              size="mini"
              value-key="name"
              @change="selectGrain('user')">
              <el-option v-for="item in userOptions" :key="item.userId" :label="item.name" :value="item"></el-option>
            </el-select>
          </div>
        </div>
        <div class="select-left" v-else></div>
        <div class="select-center">
          <el-select
            v-model="grainDate"
            placeholder="请选择"
            size="mini"
            value-key="name"
            @change="selectGrain('time')">
            <el-option
              v-for="item in quarterOptions"
              :key="item.year + item.quarter"
              :label="item.name"
              :value="item"></el-option>
          </el-select>
        </div>
        <div class="select-right"></div>
      </div>
      <div class="content" v-if="userStatus !== '0'">
        <div class="content-info">
          <div class="info-left">
            <InfoDetail type="self" :infoData="infoDetailData"></InfoDetail>
          </div>
          <div class="info-center">
            <InfoAnimation type="self" :loadFlag="loadFlag" :infoData="scoreInfoData"></InfoAnimation>
          </div>
          <div class="info-right">
            <ScoreInfo type="self" :infoData="scoreInfoData"></ScoreInfo>
          </div>
        </div>
        <div class="content-work">
          <!-- 工作纪实 -->
          <FileRecord :dataObj="dataObj" class="scroll-card"></FileRecord>
          <!-- 领导建议 -->
          <FileProposal :dataObj="dataObj" class="scroll-card"></FileProposal>
          <!-- 加分表现 -->
          <FilePoint :dataObj="dataObj" class="scroll-card"></FilePoint>
          <!-- 平时考核得分 -->
          <FileAssess :dataObj="dataObj" class="scroll-card" :infoData="scoreInfoData"></FileAssess>
        </div>
      </div>
      <div class="content" v-else>
        <div class="empty-box">
          <img src="@images/jxgl/no_exam.png" alt="" />
          <div>该季度考核未参与，建议切换查看最新季度绩效画像</div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="empty-box">
        <img src="@images/jxgl/no_exam.png" alt="" />
        <div>暂无考核数据</div>
      </div>
    </template>
  </div>
</template>

<script>
import {
  getlistYearQuarter,
  getBasicInfo,
  getPersonAssessResult,
  getAssessOrganList,
  checkIsAssessment,
  getAssessUserList,
} from '@apis/api-intelligent.js'
import InfoDetail from './components/InfoDetail'
import InfoAnimation from './components/InfoAnimation'
import ScoreInfo from './components/ScoreInfo.vue'
import FileRecord from './components/FileRecord'
import FileProposal from './components/FileProposal'
import FilePoint from './components/FilePoint'
import FileAssess from './components/FileAssess'

export default {
  name: 'SelfPortrait',
  components: { InfoDetail, ScoreInfo, InfoAnimation, FileRecord, FileProposal, FilePoint, FileAssess },
  props: {},
  data() {
    return {
      orgOptions: [],
      userOptions: [],
      orgData: {},
      userData: {},
      quarterOptions: [],
      grainDate: {},
      infoDetailData: {},
      scoreInfoData: {},
      optionUserId: localStorage.pskh_userId,
      loadFlag: false,
      userStatus: '1',
      dataObj: {
        userId: '',
        orgId: '',
        year: '',
        quarter: '',
      },
    }
  },
  computed: {},
  filters: {},
  watch: {},
  created() {
    this.dataInit()
    this.getAssessOrganList()
  },
  mounted() {},
  methods: {
    async dataInit() {
      const { data } = await getlistYearQuarter()
      this.quarterOptions = data
      this.grainDate = this.quarterOptions[0]
      this.dataObj.year = this.grainDate.year
      this.dataObj.quarter = this.grainDate.quarter
    },
    pageInt() {
      if (!this.quarterOptions.length) return
      this.loadFlag = false
      const param = {
        orgId: this.dataObj.orgId,
        quarter: this.grainDate.quarter,
        tenantId: localStorage.pskh_tenantId,
        userId: this.dataObj.userId,
        year: this.grainDate.year,
      }
      this.getBasicInfo(param)
      this.getPersonAssessResult(param)
    },
    selectGrain(type) {
      if (type === 'org') {
        this.dataObj.orgId = this.orgData.id
        this.getAssessUserList(this.orgData.id)
      } else if (type === 'user') {
        this.dataObj.userId = this.userData.id
      } else if (type === 'time') {
        this.dataObj.year = this.grainDate.year
        this.dataObj.quarter = this.grainDate.quarter
      }
      if (type !== 'org') {
        this.checkIsAssessment()
      }
    },
    getBasicInfo(param) {
      getBasicInfo(param).then(res => {
        this.infoDetailData = res.data
      })
    },
    getPersonAssessResult(param) {
      getPersonAssessResult(param).then(res => {
        this.scoreInfoData = res.data
        setTimeout(() => {
          this.loadFlag = true
        }, 300)
      })
    },
    checkIsAssessment() {
      checkIsAssessment({
        userId: this.dataObj.userId,
        quarter: this.grainDate.quarter,
        year: this.grainDate.year,
      }).then(res => {
        if (res.status === 200) {
          this.userStatus = res.data
          if (this.userStatus === '1') {
            this.pageInt()
          }
        }
      })
    },
    async getAssessOrganList() {
      const { data, status } = await getAssessOrganList({
        optionId: this.optionUserId,
      })
      if (status === 200 && data.length) {
        this.orgOptions = data
        this.orgData = data[0]
        this.dataObj.orgId = data[0].id
        this.getAssessUserList(data[0].id)
      }
    },
    async getAssessUserList(orgId) {
      const { data, status } = await getAssessUserList({
        optionId: this.optionUserId,
        orgId: orgId,
      })
      if (status === 200 && data.length) {
        this.userOptions = data
        this.userData = data[0]
        this.dataObj.userId = data[0].id
        this.checkIsAssessment()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.self-portrait {
  height: 100%;
  padding: 0 15px 10px;

  .head-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 60px;

    .select-left {
      min-width: 25%;
      display: flex;

      .select-li {
        display: flex;
        align-items: center;
        margin-right: 20px;

        &.mini {
          .el-select {
            width: 120px;
          }
        }
      }
    }

    .select-right {
      min-width: 25%;
      text-align: right;
      /deep/span {
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
      }
    }

    .select-center {
      min-width: 50%;
      text-align: center;

      .el-select {
        width: 250px;
      }

      /deep/.el-input {
        .el-select__caret {
          font-weight: bold;
          color: #333333;
        }
      }

      /deep/.el-input__inner {
        border: 0;
        font-weight: 600;
        color: #333333;
        font-size: 20px;
        background-color: transparent;
      }
    }
  }

  .content {
    height: calc(100% - 65px);
    overflow-y: auto;

    .content-info {
      display: flex;
      height: 500px;

      .info-left,
      .info-right {
        min-width: 25%;
      }

      .info-center {
        min-width: 50%;
        // background-color: rgb(48, 64, 99);
      }
    }

    .content-score {
      margin-top: 20px;
      background-color: #ffffff;
      border-radius: 4px;
    }

    .empty-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #8e95b2;
      font-size: 20px;

      img {
        width: 40%;
      }
    }
  }
  .empty-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #8e95b2;
    font-size: 18px;

    img {
      width: 25%;
    }
  }
}

.board1_dialog {
  display: flex;
  align-items: center;
  font-size: 20px;
  padding-left: 20px;
  color: #333;

  /deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #333333;
  }

  /deep/ .el-dialog__headerbtn {
    top: 17px;
    z-index: 9;
  }

  /deep/ .el-dialog__header {
    background: #4a79ba;
    padding: 13px 10px 10px 10px;
  }

  /deep/ .el-dialog__title {
    line-height: 6px;
    font-size: 20px;
    color: #fff;
    padding-left: 5px;
  }

  /deep/ .el-dialog__body {
    padding: 20px;
    font-size: 16px;
    line-height: 30px;

    /deep/.el-checkbox__label {
      font-size: 14px;
    }
  }

  .tip_title {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    line-height: 1;
    padding: 13px 10px;
    width: 85%;
    background-color: #ffffff;
    color: #333333;

    span {
      color: #d9001b;
    }
  }
}
</style>
